import { useSelector,useDispatch } from 'react-redux'
import { add } from '../../store/modules/counterStore.js'
import { addList } from '../../store/modules/counterStore.js'
import { useRef } from 'react'
export default function index(){
    //使用数据
    // const {count} = useSelector(state => state.counter)
    // const dispatch = useDispatch()
    // const addCount =() => {
    //     dispatch(add())
    // }
    const inputRef = useRef(null)
    const{list} = useSelector(state => state.counter)
    const dispatch = useDispatch()
    return(
        <div>   
            {/* <h3>当前计数:{count}</h3>
            <button onClick={() => {
                //调用增加的action
                addCount()
            }}>+</button> */}
            <input type="text" ref={inputRef} />
            <button onClick={() => {
                //调用添加的action
                dispatch(addList(inputRef.current.value))
            }}>添加</button>
            <ul>
                {
                    list.map((item,index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}